<template>
  <div class="recomment">
    <div style="width:.49rem;margin:0 auto;position: relative;">
      <h1>推荐</h1>
      <span class="select"></span>
    </div>
    <ul class="recommentData">
      <!-- <ul class="recommentData">
        <li v-for="(item, index) in detailList" :key="index" @click="getReDetail(item.diary_id)">
          <img :src="item.diary_issue_pic" alt="" class="pic">
          <p class="redetail">{{item.diary_issue_content}}</p>
          <ul class="byother">
            <li>
              <img :src="item.diary_issue_via" alt="" style="width:.15rem;height:.15rem;border-radius:50%;">
              <span>{{item.diary_issue_nickname}}</span>
            </li>
            <li>
              {{item.diary_num_like + '人点赞'}}
            </li>
          </ul>
        </li>
      </ul> -->
      <li v-for="(item, index) in detailList" :key="index" @click="getReDetail(item.diary_id)">
        <img :src="item.diary_issue_pic" alt="" class="pic">
        <div class="redetail">{{item.diary_issue_content}}</div>
        <div class="byother">
          <div class="byother_left">
            <img :src="item.diary_issue_via" alt="" style="width:.15rem;height:.15rem;border-radius:50%;">
            <span>{{item.diary_issue_nickname}}</span>
          </div>
          <div class="byother_right">{{item.diary_num_like + '人点赞'}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
// import redetail from '../../public/redetail.json'
import { getAllDiary } from '@/api'
import { Grid, GridItem, Icon, List } from 'vant'
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Icon)
Vue.use(List)
export default {
  data () {
    return {
      loading: false, // 控制list上拉列表,到底的时候为true就请求出来数据并渲染后,再设置为false,即加载状态
      finished: false, // 当加载完毕之后设置为true显示,加载完成的提示
      count: 1,
      detailList: []
    }
  },
  mounted () {
    // 本地请求json数据进行渲染
    // console.log(redetail.detailList)
    // this.detailList = redetail.detailList
    getAllDiary().then(res => {
      this.detailList = res.data.data
      // console.log(this.detailList)
    })
  },
  methods: {
    // 跳转推荐详情事件
    getReDetail (diaryid) {
      this.$router.push({ path: '/Redetail/' + 'diary_id=' + diaryid })
    }
  }
}
</script>

<style lang="scss" scoped>
.recomment {
  h1 {
    text-align: center;
    font-size: .16rem;
    margin-bottom: 0.1rem;
  }
}
/* 瀑布流最外层 */
/* #bigbox {
  margin: 0 auto;
  width: 100%;
  column-count: 2;
  column-width: 50%;
  // column-gap: 20px;
  column-fill: auto;
  padding: 0 0.13rem;
} */
/* .recommentData {
  li {
    margin-bottom: .05rem;
    position: relative;
    overflow: hidden;
    break-inside: avoid;
    .redetail {
      width:150%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      padding: 0 .1rem;
      // font-size: .12rem;
      -webkit-transform-origin-x: 0;
      -webkit-transform: scale(0.67);
      text-indent: 1em;
      line-height: .16rem;
    }
    .pic {
      width:100%;
      height: 1.8rem;
      border-radius: .05rem;
    }
  }
  .byother {
    padding: 0 .1rem;
    li:nth-of-type(1) {
      float: left;
      max-width: 0.9rem;
      img {
        width: 0.15rem;
        height: 0.15rem;
        margin-right: 0.04rem;
        float: left;
      }
      span {
        float: left;
        max-width: 0.7rem;
        -webkit-transform-origin-x: 0;
        -webkit-transform: scale(0.6);
        position: relative;
        top: 0.03rem;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
      }
    }
    li:nth-of-type(2) {
      float: right;
      max-width: 1.5rem;
      font-size: 0.1rem;
      text-align: right;
      line-height: 0.22rem;
    }
  }
} */
.select {
  display: block;
  width: 100%;
  height: 0.1rem;
  background: #ffe7e8;
  border-radius: 0.03rem;
  position: absolute;
  bottom: 0.05rem;
  z-index: -1;
}
.recommentData {
  width: 100%;
  height: auto;
  padding: 0 0.2rem;
  li {
    width: 1.55rem;
    height: 2.37rem;
    float: left;
    margin-bottom: 0.08rem;
    .pic {
      width: 1.55rem;
      display: block;
      height: 1.75rem;
      margin-bottom: 0.05rem;
    }
    .redetail {
      width: 100%;
      height: 0.34rem;
      padding: 0 0.1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      font-size: 0.1rem;
      line-height: 0.12rem;
      margin-bottom: 0.05rem;
      text-indent: 0.16rem;
      /* p {
        width: 100%;
        -webkit-transform-origin-x: 0;
        -webkit-transform: scale(0.67);
        line-height: 0.16rem;
      } */
    }
    .byother {
      width: 100%;
      height: 0.16rem;
      padding: 0 0.1rem;
      .byother_left {
        float: left;
        max-width: 0.9rem;
        img {
          width: 0.15rem;
          height: 0.15rem;
          margin-right: 0.04rem;
          float: left;
        }
        span {
          float: left;
          max-width: 0.65rem;
          -webkit-transform-origin-x: 0;
          -webkit-transform: scale(0.6);
          position: relative;
          top: 0.03rem;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap
        }
      }
      .byother_right {
        float: right;
        max-width: 1.5rem;
        font-size: 0.1rem;
        text-align: right;
        line-height: 0.22rem;
      }
    }
  }
  li:nth-of-type(2n+1) {
    margin-right: 0.24rem;
  }
}
</style>
